<template>
  <div class='container'>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <!-- 面包屑组件 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$route.query.name">
      <el-breadcrumb-item >学科管理</el-breadcrumb-item>
      <el-breadcrumb-item >{{$route.query.name}}</el-breadcrumb-item>
      <el-breadcrumb-item >目录管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
      <!-- 筛选条件 -->
      <el-form :inline="true" class="demo-form-inline" style="float: left">
        <el-form-item label="目录名称">
          <el-input v-model="reqParams.directoryName" placeholder="请输入目录名字"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="reqParams.state" placeholder="请选择">
            <el-option label="已启用" value="1"></el-option>
            <el-option label="已禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="isloading">查询</el-button>
          <el-button plain @click="clear()">清除</el-button>
        </el-form-item>
      </el-form>
       <!-- 右边添加目录 -->
          <el-button icon="el-icon-edit" style="float: right; padding: 10px" type="success" @click="addDirectory">新增目录</el-button>
          <el-button icon="el-icon-back" style="float: right; padding: 10px" type="text" @click="returnSub()" v-if="this.$route.query.name">返回学科</el-button>
    <!-- 提示总条数 -->
      <el-alert
      :title= "`一共查询到${counts}条`"
      type="info"
      >
      </el-alert>
    <!-- 列表 -->
     <el-table
      :data="list"
      style="width: 100%; margin-top:10px;"
      v-loading="isloading">
      <el-table-column
        prop="id"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
        width="160">
      </el-table-column>
      <el-table-column
        prop="directoryName"
        label="目录名称"
        width="160">
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者"
        width="160">
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期"
        width="160">
         <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString}}
          </template>
      </el-table-column>
      <el-table-column
        prop="totals"
        label="面试题数量"
        width="140">
      </el-table-column>
      <el-table-column
        label="状态"
        width="150">
        <template slot-scope="scope">
          {{ scope.row.state===0?"已禁用":"已启用"}}
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        width="160"
        >
        <template slot-scope="scope">
        <el-button type="text" @click="changeState(scope.row)">
          {{ scope.row.state === 0 ? '启用' : '禁用'}}
        </el-button>
        <el-button type="text" @click="openDialog(scope.row)" :disabled="scope.row.state === 1 ? true : false">修改</el-button>
        <el-button type="text" @click="del(scope.row)" :disabled="scope.row.state === 1 ? true : false">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
     <div class="block" style="margin-left:50%; padding-top:20px">
    <el-pagination
      @size-change="handleSizeChange"
      :current-page="reqParams.page"
      :page-sizes="[10,20,50,100]"
      :page-size="reqParams.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="counts"
      @current-change="changePage">
    </el-pagination>
  </div>
  </el-card>
  <!-- 对话框 -->
  <directorysAdd ref="directoryson" :dialogVisible="dialogFormVisible" :editdirectory="editFormData" @closeDia='closeDialog' @refresh='getList()'></directorysAdd>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/directorys.js'
import directorysAdd from '@/module-hmmm/components/directorys-add.vue'
export default {
  name: 'directory',
  data () {
    return {
      reqParams: {
        state: null, // 状态
        page: 1,
        pagesize: 10,
        subjectID: null, // 学科id
        subjectName: null, // 学科名字
        directoryName: null // 目录名字
      },
      list: [], // 表单数据存放
      counts: 0, // 总记录数
      dialogFormVisible: false, // 控制对话框
      isloading: false, // loading 效果
      editFormData: {} // 修改向子组件传递的数据
    }
  },
  components: {
    directorysAdd
  },
  created () {
    // 获取频道列表
    this.getList()
    console.log(this.$route.query)
  },
  methods: {
    // 返回学科页面
    returnSub () {
      this.$router.push('list')
    },
    // 关闭对话框
    closeDialog () {
      this.dialogFormVisible = false
    },
    // 打开修改对话框
    async openDialog (data) {
      this.editFormData = data
      console.log(data)
      this.dialogFormVisible = true
    },
    // 打开新增对话框
    addDirectory () {
      if (this.$route.query.id) {
        this.editFormData.id = null
        this.editFormData.subjectID = parseInt(this.$route.query.id)
        this.dialogFormVisible = true
      } else {
        this.editFormData = {}
        this.dialogFormVisible = true
      }
    },
    // 删除目录
    async del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 改变状态
    changeState (ele) {
      this.$confirm('此操作将切换目录的状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {
          id: ele.id,
          state: ele.state === 0 ? 1 : 0
        }
        await changeState(data)
        ele.state = ele.state === 0 ? 1 : 0
        this.$message({
          type: 'success',
          message: '切换成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消切换'
        })
      })
    },
    // 获取数据
    async getList () {
      this.isloading = true
      // 判断是不是从学科页面过来
      this.reqParams.subjectID = this.$route.query.id || null
      this.reqParams.subjectName = this.$route.query.name || null
      const result = await list(this.reqParams)
      // console.log(result)
      this.list = result.data.items
      this.counts = result.data.counts
      this.pagesize = result.data.pagesize
      this.isloading = false
    },
    formInline () {},
    // 查询
    onSubmit () {
      this.getList()
      this.reqParams.page = 1
    },
    // 清除输入框
    clear () {
      this.reqParams.directoryName = null
      this.reqParams.state = null
      this.getList()
    },
    // 控制页面显示多少条变化
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.reqParams.pagesize = val
      this.getList()
    },
    // 控制页数
    changePage (curPage) {
      // console.log(curPage)
      this.reqParams.page = curPage
      this.getList()
    }
  }
  // filters: {
  //   // 日期过滤
  //   formDate (val) {
  //     return moment(new Date(val)).format('YYYY-MM-DD hh:mm:ss')
  //   }
  // }
}
</script>

<style scoped lang='less'></style>
